<template>
  <section class="help-content center-block padding-top-0">
    <div class="Crumbs">
      您的位置：<router-link to="/helpCenter/helpLayout/index">帮助中心<b>&gt;</b></router-link><router-link to="/helpCenter/helpLayout/list">帮助列表</router-link>
    </div>

    <div class="help-main clearfix">
      <div class="help-left">
        <div class="C_menu">
          <el-menu unique-opened :default-active="id">

            <el-submenu :index="item.title" v-for="(item,index) in tabs" :key="index">
              <template slot="title">
                <span>{{item.title}}</span>
              </template>
              <el-menu-item :index="itemSub.id" v-for="(itemSub,order) in item.rows" :key="order" @click="tabRouter(itemSub.id)">
                <template slot="title">
                  <span>{{itemSub.name}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </div>

      <div class="help-right">
        <h2 class="helpTitle">{{subheading}}</h2>
        <router-view/>
      </div>
    </div>
  </section>
</template>

<script>

import { getBlackList } from '@/api/home/home'

export default {
  name: 'HelloWorld',
  data () {
    return {
      id:'',
      tabs:[
        {
          title:'登录/注册',
          rows:[
            {name:'建设单位账号注册',id:'asdaasd'},
            {name:'登录',id:'asdasw36'},
            {name:'注册',id:'asdars36'},
            {name:'找回密码',id:'asydas36'}
          ]
        },
        {
          title:'资质认定',
          rows:[
            {name:'资质申报操作指南',id:'asdaus36'},
            {name:'工程监理',id:'asdaaass36'},
            {name:'勘察设计',id:'asdttasg36'},
            {name:'工程质量检测机构',id:'asbyydas36'}
          ]},
        {
          title:'工程项目',
          rows:[
            {name:'可研批复',id:'asdjas36'},
            {name:'工程建设许可',id:'asda4s36'},
            {name:'施工许可',id:'asda55s36'},
            {name:'竣工验收备案',id:'asd66as36'}
          ]
        },
        {
          title:'办事指南',
          rows:[
            {name:'建设单位账号注册',id:'asdassss36'},
            {name:'登录',id:'asdas5555636'},
            {name:'注册',id:'asdas3776'},
            {name:'找回密码',id:'asda78s36'}
          ]
        },
        {
          title:'文本标签',
          rows:[
            {name:'资质申报操作指南',id:'asd97as36'},
            {name:'工程监理',id:'asdas3996'},
            {name:'勘察设计',id:'asdas3006'},
            {name:'工程质量检测机构',id:'asd123as36'}
          ]
        }
      ],
      subheading:''
    }
  },
  mounted () {
    this.getPersonDetail();
    this.id = this.$route.query.id || '';
    this.getName(this.id);
  },
  methods: {
    getPersonDetail (id) {
      getBlackList(id).then(res => {
        //console.log(res)
      })
    },
    handleOpen(key, keyPath){
      //console.log(key, keyPath);
    },
    getName(data){
      var stop = false;
      this.tabs.forEach(item=>{
        if(!stop){
          item.rows.forEach(val=>{
            if(val.id === this.id){
              this.subheading = val.name
              stop = true; return false
       }})}else {return false}})
    },
    tabRouter(e){
      this.id = e;
      this.getName(e);
      this.$router.push({ path:'/helpCenter/helpLayout/list', query:{id:e}});
    }

  }
}
</script>

<style>
  @import '../../assets/css/helpCenter.css';
</style>
